<script setup lang="ts">
import { ref, reactive } from 'vue'
// import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import 'element-plus/theme-chalk/el-message.css'
// import VerifyCode from '@/components/VerifyCode.vue';
// import { useUserStore } from '@/stores/user'
import { register, phoneValidate } from '@/apis/user';
import SlideVerify from '@/components/SlideVerify.vue';

// const userStore = useUserStore()
// const router = useRouter()


//表单校验
// 1.0 定义表单元素
interface RuleForm {
    account: string,
    phoneNo: string,
    password: string,
    verifyCode: string,
    clientId: string,
    agree: boolean,
    silde_result: boolean

}
// 2.0 表单对象
const formSize = ref('default')
const formRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    account: 'heima282',
    phoneNo: '17854278830',
    password: 'hm#qd@23!',
    verifyCode: '1234',
    clientId: "1",
    agree: true,
    silde_result: false
})

// 3.0 定义规则
const rules = reactive<FormRules<RuleForm>>({
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 15, message: '账号限制3-15个字符', trigger: 'blur' }
    ],
    phoneNo: [
        { required: true, message: '请输入11位手机号', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入中国大陆11位手机号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 11, message: '请输入6-11位密码', trigger: 'blur' }
    ],
    verifyCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 0, max: 4, message: '请输入4位验证码', trigger: 'blur' },
    ],
    agree: [
        { required: true, message: '请先阅读隐私条款和同意条款', trigger: 'blur' },
    ]
})

// 4.0 登陆事件
const doRegister = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    if (!ruleForm.silde_result) {
        ElMessage({
            type: 'warning',
            message: '请先验证图片'
        })
        return
    }
    await formEl.validate((valid, _fields) => {
        if (valid) {
            // 登陆
            register(ruleForm).then(res => {
                console.log(res)
                if (res.data.code != 0) {
                    ElMessage({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        }
    })
}

// 5.0 滑块验证
const dialogVisible = ref<Boolean>(false)
const handleClose = () => {
    console.log("关闭了")
}

const silde_resulta = (r: boolean) => {
    ruleForm.silde_result = r
    if (r === true) {
        //成功
        // 发送验证码
        phoneValidate(ruleForm.phoneNo).then(res => {
            if (res.data.code !== 0) {
                ElMessage({
                    type: 'warning',
                    message: res.data.message
                })
            } else {
                ElMessage({
                    type: 'warning',
                    message: '获取验证码成功'
                })
            }
        })
    }
}

// 6.0 照片墙

const images = ref<string[]>([
    'https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B9%90%E6%9C%88%E6%AF%8D%E5%A9%B4.png',
    'https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B9%90%E6%9C%88%E6%AF%8D%E5%A9%B42.jpg',
    'https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B9%90%E6%9C%88%E6%AF%8D%E5%A9%B43.jpg',
    'https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B9%90%E6%9C%88%E6%AF%8D%E5%A9%B44.jpg'
])


</script>


<template>
    <div class="container">
        <div class="nav-log">
            <span class="text">
                乐月母婴
            </span>
        </div>
        <div class="images-wall">
            <el-carousel :interval="4000" type="card" height="500px">
                <el-carousel-item v-for="item in images" :key="item">
                    <img :src="item" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="video"></div>
        <div id="aaa">sss</div>
        <div class="account-box">
            <div class="form">
                <div class="form-header">
                    <p>欢迎注册</p>
                    <span>已有账号? <a href="/login">登陆</a></span>
                </div>
                <div class="form-body">
                    <el-form ref="formRef" :model="ruleForm" :rules="rules" label-position="left" label-width="70px"
                        status-icon :size="formSize">
                        <el-form-item prop="account" label="账户">
                            <el-input v-model="ruleForm.account" />
                        </el-form-item>
                        <el-form-item prop="phoneNo" label="手机号">
                            <el-input v-model="ruleForm.phoneNo" />
                        </el-form-item>
                        <el-form-item prop="password" label="密码">
                            <el-input v-model="ruleForm.password" />
                        </el-form-item>
                        <el-form-item prop="code" label="验证码" class="form-code">
                            <el-input class="form-code-input" v-model="ruleForm.verifyCode" />
                            <el-button size="large" class="subBtn" @click="dialogVisible = true">获取验证码</el-button>
                        </el-form-item>
                        <el-form-item prop="agree" label-width="22px">
                            <el-checkbox v-model="ruleForm.agree" size="large">
                                我已同意隐私条款和服务条款
                            </el-checkbox>
                        </el-form-item>
                        <div class="form-footer">
                            <el-button size="large" class="subBtn" @click="doRegister(formRef)">点击注册</el-button>
                        </div>
                    </el-form>
                </div>

            </div>
            <el-dialog class="manual-verification" destroy-on-close v-model="dialogVisible" draggable title="滑动验证"
                width="30%" :before-close="handleClose">
                <SlideVerify sliderText="向右滑动" @silde_result="silde_resulta" />
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="dialogVisible = false">
                            Confirm
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<style scoped lang='scss'>
.container {
    background: url('https://wy-public-1306368414.cos.ap-nanjing.myqcloud.com/%E4%B8%87%E5%9C%A3%E8%8A%82-%E6%9C%88%E4%BA%AE.webp');
    background-size: 100%;
    width: 100%;
    height: 1080px;
    position: fixed;
    left: 0;
    top: 0;

    .nav-log {
        width: 150px;
        height: 80px;
        // background-color: white;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50px;
        left: 90px;

        .text {
            font-size: 30px;
            color: pink;
            text-shadow: 3px 3px 2px rgb(147, 146, 117);
        }
    }



    .images-wall {
        width: 55%;
        margin-top: 300px;
        margin-left: 10%;
    }

    .video {}

    .account-box {
        width: 400px;
        height: 400px;
        position: absolute;
        right: 200px;
        top: 200px;

        .form {
            padding: 10px 20px 20px 20px;
            background-color: rgb(147, 146, 117);

            .form-header {
                p {
                    font-size: 40px;
                    font-weight: bold;
                    margin-top: 2px;
                    margin-bottom: 2px;
                }

                span {
                    font-size: 2px;
                }

                margin-bottom: 10px;
            }

            .form-body {
                .el-form-item {
                    .el-form-item__label {
                        border: 1px red solid;
                    }

                    .el-form-item__content {
                        border: 1px red solid;
                    }


                }
            }

            .form-code {
                .el-form-item__content {
                    justify-content: space-between;

                    .form-code-input {
                        width: 50%;
                    }

                    .subBtn {
                        // 内部元素居中
                        display: flex;
                        border-radius: 5%;
                        width: 100px;
                        height: 32px;
                        margin-left: auto;
                        margin-right: 0px;
                        // 内部元素居中
                        align-items: center;
                        color: #fff;
                        background: none
                    }
                }

            }

            .agree {
                a {
                    color: #069;
                }
            }

            .form-footer {
                display: flex;
                justify-content: space-around;

                .subBtn {
                    &.disabled {
                        background: #cfcdcd;
                    }
                }

                .form-footer-register {
                    color: blue;
                    position: relative;
                    left: 10px;
                    top: 10px;
                    font-size: 3px;

                    &:hover {
                        color: red;
                    }

                    ;
                }

            }
        }

        .manual-verification {
            position: fixed;
            left: 50%;
            top: 50%;
            width: 500px;
            height: 500px;
            border: 1px red solid;
            transform: translate(-50%, -50%);
            // display: none;
        }

    }

    .subBtn {
        background: $xtxColor;
        width: 20%;
        color: #fff;
        float: center;
    }
}

@keyframes bigger {
    0% {}

    100% {
        width: 300px;
        height: 300px;
    }
}

@-webkit-keyframes bigger {
    0% {}

    100% {
        width: 300px;
        height: 300px;
    }
}

@keyframes mymove {
    0% {
        left: 0;
    }

    100% {
        left: 50%;
        width: 400px;
        height: 400px;
    }
}

@-webkit-keyframes mymove {
    0% {
        left: 0;
    }

    100% {
        left: 100px;
        width: 400px;
        height: 400px;

    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        width: 400px;
        height: 400px;
    }
}

@-webkit-keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
        width: 400px;
        height: 400px;
    }
}
</style>